<template>
  <div class="login-container">
    <el-form
      ref="loginForm"
      :model="loginForm"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <div class="title-container" style="margin-top: 30px">
        <h3 class="title">登录</h3>
      </div>
      <el-form-item
        class="form-item"
        prop="username"
        :rules="[{ required: true, message: '账号不能为空' }]"
      >
        <span class="zhanghao" style="width: 30px"></span>
        <el-input
          v-model="loginForm.username"
          placeholder="请填写登录账号"
          name="username"
          class="account"
          type="text"
          tabindex="1"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        class="form-item"
        prop="password"
        :rules="[{ required: true, message: '密码不能为空' }]"
      >
        <!-- logo-->
        <span class="mima" style="width: 30px"></span>
        <el-input
          v-model="loginForm.password"
          placeholder="请填写登录密码"
          name="password"
          tabindex="2"
          class="password"
          type="password"
          autocomplete="off"
          @keyup.enter.native="handleLogin"
        />
      </el-form-item>
      <el-button
        class="login"
        type="primary"
        @click.native.prevent="handleLogin"
        >登录</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { checkidentity } from "../../utils/user";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    handleLogin() {
      let loadingInstance1 = this.$loading({
        fullscreen: true,
        text: "拼命加载中...",
      });
      checkidentity("/logIn", "post", {
        userCode: this.loginForm.username,
        password: this.loginForm.password,
      })
        .then((rawRes) => rawRes.data)
        .then((res) => {
          if (res.length > 0) {
            this.$router.push(`/layout${res[0].menuUrl}`);
            this.$store.commit("setCategoryInfo", res);
            localStorage.setItem('uname',this.loginForm.username)
            loadingInstance1.close();
          } else {
            this.$message({
              message: "用户不可用,请重新输入",
              type: "warning",
            });
            loadingInstance1.close();
          }
        });

      this.$store.commit("addUser", {
        uname: this.loginForm.username,
        upwd: this.loginForm.password,
      });

      // let userData={
      //  uname:this.loginForm.username,
      //  upwd:this.loginForm.password
      // };
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/loginIndex.less";
</style>
